
<template>
  <div class="wrapper">


    <!-- 折叠面板 -->
     <div class="u-collapse">
       
       <el-collapse accordion>
         <!-- 循环生成折叠项 -->
         <el-collapse-item >
           <!-- 折叠项标题 -->
           <template #title>
             <h1>{{ settingList[0] }}</h1>
           </template>
   
           <!-- 折叠内容：表格 -->
           <el-table
             :data="userAgreement"
             style="width: 100%; margin-top: 10px;"
           >
             <el-table-column prop="id" label="编号" width="100" />
             <el-table-column prop="title" label="标题" width="180" />
             <el-table-column prop="content"  label="内容" width="auto" >
                <template #default="scope">
                   <span v-html="limitedContent(scope).value" show-overflow-tooltip></span>
                </template>
             </el-table-column>
   
                 <el-table-column label="操作" width="150"> 
                   <template #default="scope">
                   <el-button type="primary" size="small" @click="update(scope.row)">编辑</el-button>
                   <el-button type="danger" size="small" @click="delById(scope.row.id)">删除</el-button>
                   </template>
                 </el-table-column>
           </el-table>
         </el-collapse-item>
   
       </el-collapse>
     </div>
     <div class="u-swipper">
        <swipperManager/>
     </div>
  </div>




<el-dialog v-model="dialogFormVisible" :title="formTitle">
    <el-input v-model="formData.title"></el-input>
    <RichTextEditor xtEditor     v-model:rawContent="formData.content"
                                :renderHtml="true" 
                                />
    <button @click="saveDraft">保存内容</button>
</el-dialog>
     

</template>

<script setup >
import { computed, onMounted, ref , watch } from "vue";
import RichTextEditor from './text.vue'
import swipperManager from "./swipperManager.vue";
import { getContentList , updateContentById } from "../../api/settings";
import { ElMessage, ElMessageBox } from 'element-plus';
const dialogFormVisible = ref(false); 
const formTitle = ref("");

// 定义列表
const settingList = ref(["用户协议管理", "轮播图设置"]);
// 定义折叠面板激活状态（默认展开所有项，可改为 [] 折叠所有）
const activeNames = ref(settingList.value);

//用户协议数据
const userAgreement = ref([
  {id: 1,title:'', content: ''}
])

const formData = ref({
  id: null,
  title: '',
  content: ''
})

const limitedContent = (scope) => {
  const maxLength = 500; // 可根据需求调整最大显示字数
  return computed(() => {
    if (scope.row.content.length > maxLength) {
      return scope.row.content.substring(0, maxLength) + '...';
    }
    return scope.row.content;
  });
};
const search = async () => {
  await getContentList().then((res) => {
    if (res.code == 200) {
      userAgreement.value = res.data
    }
  });

};
const wordCount = ref(0)

// 使用 debounce 创建延迟执行的保存函数

// const handleContentChange = (newContent) => {
//   // 更新字数统计
//   wordCount.value = newContent.length
//   // 可以添加其他逻辑，如实时保存
//   saveDraft(newContent)
// }

const saveDraft = async () => {
  // 异步保存草稿到服务器
  // ...
   console.log('保存内容:', formData.value.content)

   console.log(formData.value);
   
   

   const result = await updateContentById(formData.value.id,formData.value)
   if (result.code) {
    ElMessage.success('保存成功')
    dialogFormVisible.value = false
  } else {
    ElMessage.error(result.msg)
  }
}


// 监听对话框状态变化
watch(dialogFormVisible, (newVal) => {
  if (!newVal) {
    // 对话框关闭时重置表单
    formData.value = {
      id: null,
      content: ''
    }
  }
})


const addcontent = () => {
  dialogFormVisible.value = true
  formTitle.value = '新增'
}



const update = async (row) => {
 console.log(row.content);
 
  dialogFormVisible.value = true
  
  formTitle.value = '修改'
  //回显 formData。value
  // formData.value = await queryStrategyByIdApi(id)
  formData.value = row

}



const delById = (id) => {
  
}

onMounted(() => {
  search();
});
</script>

<style scoped>
    body{
        background-color: #bfa;
    }
.el-table {
  font-size: 15px;
}

.wrapper {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.u-collapse{
  width: 99%;
  /* border: 1px solid red; */
  padding: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.u-swipper{
  width: 99%;
  margin-top: 10vh;
}
 
</style>